<template>
  <div>
    <el-button type="primary"
               style="margin-top: 20px;
                 margin-left: 20px;margin-bottom: 20px" @click="dialogVisible = true">+添加维修区域</el-button>
    <el-button type="danger" style="margin-left: 50px" @click="deleteRow">删除</el-button>
    <br>
    <label for="category-name" style="margin-left: 20px">区域名称：</label>
    <el-input
      id="category-name"
      type="text"
      placeholder="请输入名称"
      v-model="form.name"
      clearable
      style="width: 200px;margin-bottom: 20px;margin-right: 10px "
    />
    <!--      搜索按钮-->
    <el-button @click="search"
               style="color: #1482f0"
               class="el-icon-search"
    >搜索</el-button>
    <!--重置按钮-->
    <el-button @click="chongzhi"
               style="color: #1482f0"
               class="el-icon-aim"
    >重置</el-button>

    <label for="category-name" style="margin-left: 30%">状态：</label>
    <el-select v-model="form.state" placeholder="请选择状态" style="width: 200px; margin-right: 10px" clearable>
      <el-option label="停用" value="0"></el-option>
      <el-option label="启用" value="1"></el-option>
    </el-select>


    <!--      设备列表-->
    <el-table :data="equipmentTableData" style="width: 100%;" border>
      <el-table-column prop="id" label="主键" width="180"></el-table-column>
      <el-table-column prop="equipmentCategoryName" label="设备类目名称" width="180"></el-table-column>
      <el-table-column prop="categoryId" label="类目编号" width="180"></el-table-column>
      <el-table-column prop="categoryLevel" label="类目层级" width="180"></el-table-column>
      <el-table-column prop="parentId" label="父级类目编号" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '停用' : '启用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="190">
        <template slot-scope="scope" >
          <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">添加下级目录</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--      添加弹框-->
    <el-dialog title="添加页面" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="20%">
        <el-form-item label="设备类目名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
    </el-dialog>


  </div>
</template>


<script>
import {esList} from "@/api/dms/equipmentCategory/equipmentCategory";
export default {
  name: 'index',
  data() {
    return {
      dialogVisible: false,
      form: {
        name: ''
      },
      equipmentTableData:[],
    }
  },

  methods: {
    esList(){
      esList().then(response => {
        this.equipmentTableData = response.data;
      })
    },

    deleteRow(row) {
      // 确认删除弹窗
      Swal.fire({
        title: '删除操作',
        text: `确认删除设备："${row.name}" 的所有数据？`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.isConfirmed) {
          this.performDelete(row.id);
        }
      });
    },

    async performDelete(brandId) {
      try {
        const response = await brandIdDelete(brandId);
        if (response.code === 200) {
          await Swal.fire('删除成功', '该设备已成功删除。', 'success');
          this.getData(); // 刷新数据列表
        } else {
          await Swal.fire('删除失败', '删除'+"${row.name}"+'时发生错误。', 'error');
        }
      } catch (error) {
        console.error('Error during brand deletion:', error);
        await Swal.fire('删除失败', '请稍后再试或联系管理员。', 'error');
      }
    }
  },
  created() {
    this.esList();
  }

}
</script>

<style scoped>

</style>
